<template>
    <h3>页面构建时的注意事项</h3>
    <h4>1.错误的提示模式</h4>
    <ul>
        <li>控制台环境:
            <ol>
                <li>启动时错误，会直接导致启动失败：环境配置错误、环境模块丢失、环境模块不兼容</li>
                <li>启动成功，但程序运行或者编译出现错误：src+public中的项目逻辑代码错误=>存在服务器页面映射</li>
            </ol>
        </li>
        <li>浏览器的页面环境:
            <ol>
                <li>映射错误:程序运行或编译错误映射在浏览器视窗上的结果</li>
                <li>业务错误:程序可以正常启动编译和运行，但运行时存在vue的使用错误</li>
            </ol>
        </li>
        <li>浏览器的控制台环境:【增量错误记录-不会清空错误的】
            <ol>
                <li>映射错误:程序运行或编译错误映射在浏览器控制台上的结果</li>
                <li>业务错误:程序可以正常启动编译和运行，但运行时存在vue的使用错误</li>
            </ol>
        </li>
    </ul>
    <p>msg:{{ msg }}</p>
    <input type="button" value="打印变量" @click="printMsg()">
    <hr>
    <h4>2.静态资源处理</h4>
    <ul>
        <li>
            vue模块化项目的静态资源，除非特殊要求，一般存放于 src/asstes 目录
            <ol>
                <li>assets中存放的图片如果大小在一定范围之内，vue编译时会直接将该图片转换为base64文本</li>
                <li>统一路径转换【3.开发时的图片、视频、音频路径问题中详细描述】</li>
            </ol>
        </li>
        <li>
            非模块化JS脚本的加载:JS脚本不具有模块语法，但需要在项目中进行全局化加载
            <br>
            非模块化JS脚本，可以直接在main.js引导文件或者组件的script脚本区域，以无返回值的方式进行导入
            <br>
            例如 ：import "模块路径"
            <br>
            如果是组件进行的加载和使用，此时如果组件未被加载，该脚本文件也不会被加载；
            所以建议非模块化的全局脚本文件直接在main.js中完成加载
        </li>
        <li>
            独立样式文件的处理：在vue模块化环境中因为已经集成了css-loader加载器和相关的转换模块，
            所以样式文件是可以直接当做非模块化JS脚本使用的
            <br>
            例如： import "css样式文件";
        </li>
        <li>
            图片，视频、音频…… 静态资源也可以直接作为模块进行导入加载，静态资源导入后会得到编译后的数据
            <br>
            例如: import 编译结果 from "图片文件"
        </li>
    </ul>
    <img class="img" src="@/assets/logo.png" alt="" srcset="">
    <img class="img" src="@/assets/Desert.jpg" alt="" srcset="">
    <br><br>
    <button type="button" class="btn btn-primary">Primary</button>
    <br><br>
    <i class="iconfont icon-circle-plus"></i>
    <hr>
    <h4>3.开发时的图片、视频、音频路径问题</h4>
    <p>src 中存放的所有资源文件(js,css,图片……)都是由vue项目编译后才能在程序中运行加载的;</p>
    <p>vue模块化项目对一些无法集成的静态资源(大图片、视频、音频、字库文件……)，会直接复制到服务器对应的目录；</p>
    <p>静态资源在复制过程中，为了保证新的资源可以直接跳过浏览器缓存，每次都会被增加一个 hash 后缀名</p>
    <ul>
        <li>
            参与编译过程的资源
            <ol>
                <li>img 的src静态方式方式加载的相对路径图片</li>
                <li>单文件组件中 style 标签定义的 css 样式加载的相对路径图片</li>
                <li>以模块语法方式加载的相对路径图片</li>
            </ol>
        </li>
        <li>
            不参与编译过程的资源
            <ol>
                <li>以http协议定义的绝对路径图片</li>
                <li>单文件组件中，标签行内样式中加载的图片</li>
                <li>单文件组件中以vue语法方式绑定的变量，取值相对路径图片时</li>
            </ol>
        </li>
    </ul>
    <p>参与编译</p>
    <img class="img" src="@/assets/Desert.jpg" alt="" srcset="">
    <div class="img-bg"></div>
    <p>不参与编译</p>
    <img class="img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" srcset="">
    <div class="img-bg2" style="background-image: url('@/assets/Desert.jpg');"></div>
    <img class="img" :src=" path " alt="" srcset="">
    <hr>
    <p>不参与编译的资源加载方案</p>
    <p>方案1：将静态资源以模块方式先加载成变量</p>
    <img class="img" :src=" path1 " alt="" srcset="">
    <div class="img-bg2" :style=" `background-image: url('${ path1 }');` "></div>
    <p>方案2：跳过babel转换工具功能，直接使用require语法加载文件，强行启动编译功能</p>
    <div class="img-bg2" :style=" 'background-image: url('+ require('@/assets/Desert.jpg') +');' "></div>
    <hr>
    <h4>4.vue模块项目的路径别名</h4>
    <p>@/ 可以在 vue模块化项目中用于指代 src/ 地址，当vue项目的文件路径都采用@/规则，后续移动文件结构不会造成路径错误的情况出现</p>
    <TestPath></TestPath>
</template>

<script>
// import "@/assets/js/a.js"
import path1 from  "@/assets/Desert.jpg";
import path2 from  "@/assets/logo.png";
console.log(path1,path2)

// import TestPath from "@/components/TestPath.vue";
import TestPath from "@/components/TestPath/TestPath.vue";


export default {
    components:{
        TestPath
    },
    data() {
        return {
            msg:"测试消息",
            path:"@/assets/Desert.jpg",
            path1:path1
        }
    },
    methods: {
        printMsg() {
            console.log(this.msg)
        }
    },
}
</script>

<style scoped>
.img{
    width: 120px;
    height: 120px;
    border: 1px solid black;
}
.img-bg{
    display: inline-block;
    width: 120px;
    height: 120px;
    border: 1px solid black;
    background-image: url("@/assets/Desert.jpg");
}
.img-bg2{
    display: inline-block;
    width: 120px;
    height: 120px;
    border: 1px solid black;
}
</style>